<script setup>
import {reactive} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const info = reactive({
  list:[],
  dialogVisible:false, //弹窗
  form:{},  //表单数据
  isAdd:true, //添加或者修改的标识，true增加 false 修改
  pageNum:1, //分页-页码
  pageSize:5,//分页-页大小
  total:0, //总条数
  deptList:[]//所有部门数据
})

const load = () => {
  axios.get('http://127.0.0.1:8080/employee',{
    params:{
      pageSize:info.pageSize,
      pageNum:info.pageNum,
      name:info.form.name,
      employeeNumber:info.form.employeeNumber,
      hireDate:info.form.hireDate
    }
  }).then(res => {
    console.log(res)
    info.list = res.data.list
    //分页
    info.total = res.data.total
  })
}
load();

const queryDeptList=()=>{
  axios.get('http://127.0.0.1:8080/department/queryAll',{}).then(res=>{
    info.deptList=res.data
  })
}
//------------分页开始-------------
//改变页大小
const handleSizeChange = (val) => {
  info.pageSize = val
  load();
}
const handleCurrentChange = (val) => {
  info.pageNum = val
  load();
}
//------------分页结束-------------
//删除方法
const handleDelete = (id) =>{
  axios.delete('http://127.0.0.1:8080/employee/'+id,{}).then(res => {
    if(res.data === true){
      ElMessage({
        message: '删除成功.',
        type: 'success',
      })
    }else{
      ElMessage.error('删除失败，请联系管理员.')
    }

    //刷新数据
    load();
  })
}
const add = () => {
  info.form={}
  info.isAdd = true
  queryDeptList()
  info.dialogVisible = true
}
//修改弹窗
const handleEdit = (id) =>{
  info.isAdd = false
  //根据传递的id去后端查询最新数据
  axios.get('http://127.0.0.1:8080/employee/'+id,{}).then(res => {
    info.form = res.data
  })
  queryDeptList()
  //弹窗打开
  info.dialogVisible = true
}
//保存或更新数据
const saveOrUpdate = () => {

  axios({
    method: info.isAdd?'post':'put',
    url: 'http://127.0.0.1:8080/employee',
    data: info.form
  }).then(res => {
    if(res.data === true){
      ElMessage({
        message: '操作成功.',
        type: 'success',
      })
    }else{
      ElMessage.error('操作失败，请联系管理员.')
    }
    //关闭当前的对话框
    info.dialogVisible = false
    //清除当前已经填写的表单数据
    info.form = {}
    //重新加载一下最新的数据
    load()
  })

}

</script>

<template>
  <el-button type="danger" plain @click="add()">增加职工</el-button>
  <!-- 快捷查询 -->
  <br><br>
  <el-form :inline="true" :model="info.form" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="info.form.name" placeholder="模糊查询" clearable />
    </el-form-item>
    <el-form-item label="工号">
      <el-input v-model="info.form.employeeNumber" placeholder="精准查询" clearable />
    </el-form-item>
    <el-form-item label="入职日期">
<!--      <el-input v-model="info.form.hireDate" placeholder="精准查询" clearable />-->
      <el-date-picker
          v-model="info.form.hireDate"
          type="date"
          placeholder="选择日期"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="load">快捷查询</el-button>
    </el-form-item>
  </el-form>
  <!-- 表格数据 -->
  <el-table :data="info.list" border  style="width: 100%">
    <el-table-column fixed align="center" type="index" label="序号" width="80" />
    <el-table-column fixed align="center" prop="name" label="姓名" width="120" />
    <el-table-column align="center" prop="sex" label="性别" width="120" >
      <template #default="scope">
        <span v-if="scope.row.sex===0">男</span>
        <span v-if="scope.row.sex===1">女</span>
        <span v-if="scope.row.sex===2">未知</span>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="birthdayDate" label="出生日期" width="180" />
    <el-table-column align="center" prop="politicsStatus" label="政治面貌" width="180" />
    <el-table-column align="center" prop="nation" label="民族" width="120" />
    <el-table-column align="center" prop="nativePlace" label="籍贯" width="180" />
    <el-table-column align="center" prop="email" label="邮箱" width="300" />
    <el-table-column align="center" prop="address" label="联系地址" width="400" />
    <el-table-column align="center" prop="department.deptName" label="部门" width="180" />
    <el-table-column align="center" prop="phone" label="联系方式" width="180" />
    <el-table-column align="center" prop="employeeNumber" label="工号" width="180" />
    <el-table-column align="center" prop="education" label="学历" width="180" />
    <el-table-column align="center" prop="graduationInstitution" label="毕业院校" width="180" />
    <el-table-column align="center" prop="professionalName" label="专业名称" width="180" />
    <el-table-column align="center" prop="hireDate" label="入职日期" width="180" />
    <el-table-column align="center" prop="probationDate" label="转正日期" width="180" />
    <el-table-column align="center" prop="contractStartDate" label="合同起始日期" width="180" />
    <el-table-column align="center" prop="contractEndDate" label="合同结束日期" width="180" />
    <el-table-column align="center" prop="idcard" label="身份证号" width="180" />
    <el-table-column align="center" prop="employmentType" label="聘用形式" width="180">
      <template #default="scope">
        <span v-if="scope.row.employmentType===0">劳动合同</span>
        <span v-if="scope.row.employmentType===1">劳务合同</span>
      </template>
    </el-table-column>
    <el-table-column align="center" prop="maritalStatus" label="婚姻状况" width="180">
      <template #default="scope">
        <span v-if="scope.row.maritalStatus===0">未婚</span>
        <span v-if="scope.row.maritalStatus===1">已婚</span>
      </template>
    </el-table-column>

    <el-table-column fixed="right" align="center" label="操作" width="230">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.id)">修改</el-button>
        <el-popconfirm @confirm="handleDelete(scope.row.id)" title="你确定删除么?">
          <template #reference>
            <el-button size="small" type="danger" >删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <br>
  <el-pagination
      v-model:current-page="info.pageNum"
      v-model:page-size="info.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      :size="size"
      :disabled="disabled"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="info.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

  <!-- 弹窗 -->
  <el-dialog
      v-model="info.dialogVisible"
      :title="info.isAdd?'增加职工':'修改职工'"
      width="80%"
      :before-close="handleClose"
  >
    <hr style="height: 3px;background-color: rgba(255,0,0,0.78)">
    <br>
    <el-form :model="info.form" label-width="100px" style="max-width: 80%;padding-left: 60px">
      <el-row>
        <el-form-item label="姓名">
          <el-input v-model="info.form.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="info.form.sex">
            <el-radio :value="0">男</el-radio>
            <el-radio :value="1">女</el-radio>
            <el-radio :value="2">未知</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
              v-model="info.form.birthdayDate"
              type="date"
              placeholder="选择日期"
              :size="size"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="政治面貌">
          <el-select v-model="info.form.politicsStatus" placeholder="请选择">
            <el-option label="中共党员" value="中共党员" />
            <el-option label="共青团员" value="共青团员" />
            <el-option label="无党派人士" value="无党派人士" />
            <el-option label="群众" value="群众" />
          </el-select>
        </el-form-item>
        <el-form-item label="民族">
          <el-input v-model="info.form.nation" />
        </el-form-item>
        <el-form-item label="籍贯">
          <el-input v-model="info.form.nativePlace" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="邮箱">
          <el-input v-model="info.form.email" />
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="info.form.address" />
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="info.form.departmentId" placeholder="请选择">
            <el-option v-for="item in info.deptList" :label="item.deptName" :value="item.deptId" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="联系方式">
          <el-input v-model="info.form.phone" />
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="info.form.employeeNumber" />
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="info.form.education" placeholder="请选择">
            <el-option label="幼儿园" value="幼儿园" />
            <el-option label="小学" value="小学" />
            <el-option label="初中" value="初中" />
            <el-option label="高中" value="高中" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="毕业院校">
          <el-input v-model="info.form.graduationInstitution" />
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="info.form.professionalName" />
        </el-form-item>
        <el-form-item label="入职日期">
          <el-date-picker
              v-model="info.form.hireDate"
              type="date"
              placeholder="选择日期"
              :size="size"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="转正日期">
          <el-date-picker
              v-model="info.form.probationDate"
              type="date"
              placeholder="选择日期"
              :size="size"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="合同起始">
          <el-date-picker
              v-model="info.form.contractStartDate"
              type="date"
              placeholder="选择日期"
              :size="size"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="合同结束">
          <el-date-picker
              v-model="info.form.contractEndDate"
              type="date"
              placeholder="选择日期"
              :size="size"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="身份证号">
          <el-input v-model="info.form.idcard" />
        </el-form-item>
        <el-form-item label="聘用形式">
          <el-radio-group v-model="info.form.employmentType">
            <el-radio :value="0">劳动合同</el-radio>
            <el-radio :value="1">劳务合同</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="info.form.maritalStatus">
            <el-radio :value="0">未婚</el-radio>
            <el-radio :value="1">已婚</el-radio>


          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" @click="saveOrUpdate()">
          保存信息
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>
.el-select{
  width: 193px;
}
*/deep/.el-form-item__content{
  width: 194px;
}
</style>